<template>
	<view class="my-layout">
		<view class="kf-top">
			<image class="kf-logo" src="/static/kefu/kf.png" mode="widthFix"></image>
			<u-button type="warning" hape='circle'  style="width: 50%;" @tap='makeCall'>联系客服</u-button>
		</view>
		<view class="tel-list">
			<view class="tel-item" v-for="(item,index) in phones" :key='index'>
				<text>联系QQ{{index}}:{{item}}</text>
				<u-button type="warning" shape='circle' size="medium" style="width: 20%;" @tap='copyNum(item)'>复制</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phones:[27967755,5007685677,5799091234]
			};
		},
		methods:{
			copyNum(item){
				uni.setClipboardData({
				    data: item,
				    success() {
				        uni.showToast({
				        	title:"复制成功",
							duration:1000
				        })
				    }
				});
			},
			makeCall(){
				uni.makePhoneCall({
				    phoneNumber: '114' //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-layout {
		background-color: #F4F5F9;
	}
	.kf-top {
		height: 304rpx;
		border-top: 20rpx solid #f4f5f9;
		padding: 20rpx;
		background-color: #FFFFFF;
		clear: both;
		text-align: center;
		.kf-logo{
			width: 100rpx;
		}
	}
	.tel-list{
		margin-top: 20rpx;
		padding: 27rpx 35rpx;
		background-color: #FFFFFF;
		.tel-item{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}
</style>
